<template>
  <div class="app-main" v-loading="loading">
    <div class="divTmp" v-show="loading"></div>
    <div class="container view-body" v-show="!loading">
      <el-button @click="showSecond = false" v-show="showSecond">返回</el-button>
      <el-form
          name="ruleForm"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="rule-form"
      >
        <div v-show="!showSecond">
          <div class="tip">
            <div class="tip-content">
              <p>课程编号由管理员提供，若为空则将自动填充</p>
              <p>课程名称为必填项，且不得重复</p>
            </div>
          </div>
          <el-form-item prop="number" class="rule-form-input-item">
            <div class="rule-form-input-div">
              <el-input
                  type="text"
                  class="input-item"
                  :placeholder="'课程编号固定前缀：' + numberF"
                  disabled
                  style="width: 45%;"
              >
              </el-input>
              <el-input
                  type="text"
                  class="input-item"
                  v-model="numberS"
                  style="width: 45%;margin-left: 10%"
                  placeholder="请输入编号"
              >
              </el-input>
            </div>
          </el-form-item>

          <!--          课程名称-->
          <el-form-item prop="name" class="rule-form-input-item">
            <div class="rule-form-input-div">
              <el-input
                  type="text"
                  placeholder="请输入课程名称"
                  v-model="ruleForm.name"
                  style="width: 55%;float: left"
                  autocomplete="off"
              ></el-input>
              <el-select v-model="ruleForm.classify"
                         filterable
                         style="width: 35%;float: left;margin-left: 10%"
                         placeholder="请选择课程类型">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <!--          建议专业-->
          <el-form-item prop="specialized" class="rule-form-input-item">
            <div class="rule-form-input-div">
              <el-select v-model="ruleForm.adviseSpecialized"
                         filterable
                         placeholder="请选择课程建议专业，默认所有专业">
                <el-option
                    v-for="item in specialized"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>

            </div>
          </el-form-item>

          <!--          对应材料编号-->
          <el-form-item prop="marterialsNumber" class="rule-form-input-item">
            <div class="rule-form-input-div">
              <div>
                <span style="color: #969696">请输入课程对应教材编号：</span>
              </div>
              <el-input
                  type="text"
                  placeholder="XXXX-XXXX-XXXX-XXXX"
                  v-model="ruleForm.marterialsNumber"
                  autocomplete="off"
              ></el-input>
            </div>
          </el-form-item>
          <!--          建议学时时长-->
          <el-form-item class="rule-form-input-item">
            <div class="rule-form-input-div">
              <el-input
                  type="text"
                  class="input-item"
                  placeholder="选择建议学时时长"
                  disabled
                  style="width: 35%;float:left;"
              >
              </el-input>
              <el-input-number v-model="ruleForm.adviseHours"
                               @change="handleChange"
                               style="float: left;margin-left: 22%;margin-top: 2px"
                               :min="20" :max="50"></el-input-number>
            </div>
          </el-form-item>
          <!--        课程介绍-->
          <el-form-item prop="introduction" class="rule-form-input-item">
            <div class="rule-form-input-div">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入课程介绍"
                  v-model="ruleForm.introduction">
              </el-input>
            </div>
          </el-form-item>
          <el-button
              class="btn"
              type="primary"
              @click="showSecond = true"
          >
            <span>下一步</span>
          </el-button>
        </div>
        <div v-show="showSecond">

          <el-form-item prop="classes"
                        class="rule-form-input-item">
            <div class="rule-form-input-div">
              <div>
                <el-button @click="join">添加专业班级</el-button>
                <div>
                  <span v-show="ruleForm.classesData.length !== 0">请输入将完成作业的班级，例：214，或214-215</span>
                </div>

              </div>
              <div v-show="ruleForm.classesData.length !== 0"
                   style="margin-top: 10px"
                   v-for="(data,index) in ruleForm.classesData">
                <el-select v-model="data.specialized"
                           filterable
                           style="width: 50%;float: left"
                           placeholder="请选择课程教学对应专业">
                  <el-option
                      v-for="item in specialized"
                      :key="item.value"
                      :label="item.label"
                      :value="item">
                  </el-option>
                </el-select>
                <el-input
                    type="text"
                    style="margin-left: 5%;width: 23%;float: left"
                    placeholder="输入班级"
                    v-model="data.classes"
                    autocomplete="off"
                ></el-input>
                <el-button style="width: 17%;float: left;margin-left: 5%"
                           @click="deleteData(index)"
                >删除
                </el-button>
                <div style="clear:both;"></div>
              </div>


            </div>
          </el-form-item>
          <el-button
              class="btn"
              type="primary"
              v-if="spanIf"
              @click="submitForm('ruleForm')"
          >
            <span>创建</span>
          </el-button>
          <el-button
              class="btn"
              type="primary"
              v-else
          >
            <span>等待....</span>
          </el-button>
        </div>

      </el-form>


    </div>

  </div>


</template>

<script>
import {allSpecializedName} from "@/apis/teacher";
import {collegeNumberGet} from "@/apis/teacher";
import {courseSave} from "@/apis/teacher";

export default {
  components: {},
  props: {},
  data() {
    return {
      loading: true,
      numberF: '',
      numberS: '',
      showSecond: false,
      ruleForm: {
        id: '',
        number: '',
        name: '',
        classify: '',
        marterialsNumber: '',
        adviseSpecialized: '',
        adviseHours: 20,
        introduction: '',
        classesData: [],
      },
      spanIf: true,
      options: [{
        value: '公选课',
        label: '公选课'
      }, {
        value: '哲学',
        label: '哲学'
      }, {
        value: '经济学',
        label: '经济学'
      }, {
        value: '法学',
        label: '法学'
      }, {
        value: '教育学',
        label: '教育学'
      }, {
        value: '文学',
        label: '文学'
      }, {
        value: '历史学',
        label: '历史学'
      }, {
        value: '理学',
        label: '理学'
      }, {
        value: '工学',
        label: '工学'
      }, {
        value: '农学',
        label: '农学'
      }, {
        value: '医学',
        label: '医学'
      }, {
        value: '军事学',
        label: '军事学'
      }, {
        value: '管理学',
        label: '管理学'
      }, {
        value: '艺术学',
        label: '艺术学'
      }, {
        value: '教师发展',
        label: '教师发展'
      }, {
        value: '院校建党',
        label: '院校建党'
      }, {
        value: '课程思政',
        label: '课程思政'
      }, {
        value: '直接教育',
        label: '直接教育'
      }],
      specialized: [],
      rules: {
        name: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
          {type: 'string', max: 10, message: "请输入正确格式的名称", trigger: 'blur'}
        ],
        marterialsNumber: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
          {
            type: 'string', len: 19, message: "请输入正确格式的编号",
            trigger: 'blur', pattern: /[1-9]\d{3}-\d{4}-\d{4}-\d{4}/
          }
        ],

      },
    }
  },
  created() {
    // 初始化
    this.init()
  },

  methods: {
    // 初始化资源
    async init() {

      this.closeLoading()  // 关闭加载动画
      this.spanIf = true


      this.ruleForm.id = localStorage.getItem("id")
      // 获取所有专业名称
      allSpecializedName().then(resp => {
        if (resp?.data?.code === 1) {
          this.specialized = resp?.data?.data
        }
      })
      // 获取课程对应学校编号
      collegeNumberGet(this.ruleForm.id).then(resp => {
        if (resp?.data?.code === 1) {
          this.numberF = resp?.data?.data
        }
      })
    },

    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {


          this.ruleForm.number = this.numberF + this.numberS
          if (this.ruleForm.adviseSpecialized === "") {
            this.ruleForm.adviseSpecialized = "所有专业"
          }
          console.log(this.ruleForm.number)
          courseSave(this.ruleForm).then(resp => {
            if (resp?.data?.code === 1) {
              this.$message.success("添加信息成功")
              this.ruleForm = {}
            } else {
              this.$message.error(resp?.data?.msg)
            }
          })

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加专业班级
    join() {
      this.ruleForm.classesData.push({'specialized': '', 'classes': ''}) // JSON.parse(JSON.stringify(this.dishFlavorsData))
    },
    // 按钮 - 删除口味
    deleteData(ind) {
      this.ruleForm.classesData.splice(ind, 1)
    },


    // 计数器
    handleChange(value) {
    },
    // 加载动画
    closeLoading() {
      this.timer = null
      this.timer = setTimeout(() => {
        this.loading = false
      }, 500)
    },
  }
}
</script>
<style scoped>

*, :after, :before {
  box-sizing: border-box;
}

div {
  display: block;
  unicode-bidi: isolate;
}


.divTmp {
  width: 100%;
}

::v-deep .el-loading-mask {
  transition: opacity 0s;
}

::v-deep .el-loading-spinner {
  top: 100%;
  margin-top: 20%;
  width: 100%;
  text-align: center;
  position: absolute;
}

.course-student-spoc {
  position: relative;
}


::v-deep .el-table thead {
  color: black;
}

.view-body {
  padding: 80px 32px;
  background-color: #fff;
}

.container {
  width: 800px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.tip {
  background: #fdf6ec;
  border-radius: 14px;
  padding: 10px;
  margin: 20px 0 30px;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}


.rule-form {
  width: 420px;
  margin: 30px auto;
  display: block;
}

.rule-from-input-items {
}

.rule-form-input-item {
  margin-bottom: 22px;
}

.rule-form-input-div {
  line-height: 44px;
  display: inline-block;
  font-size: 14px;
  position: relative;
  width: 100%;
}

.input-item {
  height: 44px;
  line-height: 44px;
  -webkit-appearance: none;
  background-image: none;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

button,
select {
  text-transform: none;
}

.btn {
  margin-top: 18px;
  width: 100%;
  padding: 14px 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background-color: #ea5947;
  border-color: #ea5947;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: 0.1s;
  font-weight: 400;
  -webkit-user-select: none;
  font-size: 14px;
  border-radius: 4px;
  min-width: 88px;
}

span {
  color: #fff;
  line-height: 1;
  font-size: 14px;
}


.flavorBox {
  width: 777px;
}

.flavorBox .addBut {
  background: #ffc200;
  display: inline-block;
  padding: 0px 20px;
  border-radius: 3px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 4px;
  color: #333333;
  font-weight: 500;
}

.flavorBox .flavor {
  border: solid 1px #dfe2e8;
  border-radius: 3px;
  padding: 15px;
  background: #fafafb;
}

.flavorBox .flavor .title {
  color: #606168;
}

.flavorBox .flavor .cont .items {
  display: flex;
  margin: 10px 0;
}

.flavorBox .flavor .cont .items .itTit {
  width: 150px;
  margin-right: 15px;
}

.flavorBox .flavor .cont .items .itTit input {
  width: 100%;
  line-height: 40px;
  border-radius: 3px;
  padding: 0 10px;
}

.flavorBox .flavor .cont .items .labItems {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  border-radius: 3px;
  min-height: 39px;
  padding: 0 5px;
}

.flavorBox .flavor .cont .items .labItems span {
  display: inline-block;
  color: #f19c59;
  margin: 5px;
  line-height: 26px;
  height: 26px;
  padding: 0 10px;
  background: #fdf4eb;
  border-radius: 3px;
  border: solid 1px #fae2cd;
}

.flavorBox .flavor .cont .items .labItems span i {
  cursor: pointer;
  font-style: normal;
}

.flavorBox .flavor .cont .items .delFlavor {
  display: inline-block;
  padding: 0 10px;
  color: #f19c59;
  cursor: pointer;
  margin-top: 13px;
}
</style>